<template>
  <!-- 骨架屏 -->
  <el-skeleton :loading="loading" animated :throttle="200">
    <!-- 骨架样式 -->
    <template v-if="myType === 'list'" slot="template">
      <div class="my-skeleton">
        <el-skeleton :rows="6" />
      </div>
    </template>
    <template v-if="myType === 'article'" slot="template">
      <div class="my-skeleton">
        <div class="article-info">
          <el-skeleton-item
            variant="circle"
            style="width: 40px; height: 40px"
          />
          <el-skeleton-item variant="h3" style="margin-left: 1rem" />
        </div>
        <el-skeleton-item
          variant="image"
          style="width: 100%; height: 200px; margin: 0 0 10px 0"
        />
        <el-skeleton :rows="3" />
      </div>
    </template>
    <!-- 稍后显示的数据 -->
    <template>
      <slot></slot>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  name: 'Skeleton',
  props: {
    // 骨架样式
    myType: {
      tyep: String,
      default: 'list'
    },
    loading: {
      tyep: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.my-skeleton) {
  width: 95% !important;
  margin: 10px auto !important;
}

.article-info {
  display: flex;
  padding: 10px 0;
  align-items: center;

  .el-skeleton__h3 {
    margin: auto;
    width: calc(100% - 60px);
  }
}
</style>
